
<template>
  <div>
    <el-button @click="clearFilter">清除所有过滤器</el-button>
    <el-table
        ref="filterTable"
        :data="tableData"
        style="width: 100%">

      <el-table-column
          label="订单id"
          prop="id"
          width="70">
      </el-table-column>

      <el-table-column
          label="订单编号"
          prop="number"
          width="150">
      </el-table-column>

      <el-table-column
          label="商品名称"
          prop="productid"
          width="100">
        <!-- 添加状态色-->
        <template slot-scope="scope">
          <span v-for="productname in productnames" v-show="productname.id == scope.row.productid">
            {{productname.productname}}
          </span>
        </template>
      </el-table-column>

      <el-table-column
          label="订购数量"
          prop="num"
          width="100">
      </el-table-column>

      <el-table-column
          label="交付日期"
          prop="deliverydate"
          width="180">
      </el-table-column>

      <el-table-column
          label="投标截止日期"
          prop="tenderdate"
          width="180">
      </el-table-column>

      <el-table-column
          label="收货人"
          prop="recevierid"
          width="100">
        <!-- 添加状态色-->
        <template slot-scope="scope">
          <span v-for="recevier in receviers" v-show="recevier.id == scope.row.recevierid">
            {{recevier.name}}
          </span>
        </template>
      </el-table-column>

      <el-table-column
          label="收货联系方式"
          prop="recevierid"
          width="100">
        <!-- 添加状态色-->
        <template slot-scope="scope">
          <span v-for="recevier in receviers" v-show="recevier.id == scope.row.recevierid">
            {{recevier.connection}}
          </span>
        </template>
      </el-table-column>

      <el-table-column
          label="收货人地址"
          prop="recevierid"
          width="100">
        <!-- 添加状态色-->
        <template slot-scope="scope">
          <span v-for="recevier in receviers" v-show="recevier.id == scope.row.recevierid">
            {{recevier.address}}
          </span>
        </template>
      </el-table-column>

      <el-table-column
          :filter-method="filterTag"
          :filters="tages"
          align="center"
          filter-placement="bottom-end"
          label="订单状态"
          prop="statusid"
          width="100">
        <!-- 添加状态色-->
        <template slot-scope="scope">
          <el-tag
              disable-transitions>
          <span v-for="status in statuses" v-show="status.id == scope.row.statusid">
            {{status.status}}
          </span>
          </el-tag>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
        :page-size="pageSize"
        :total="total"
        background
        layout="prev, pager, next"
        @current-change="page">
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pageSize: 14,
      total: null,
      statuses:null,
      tableData: null,
      receviers:null,
      productnames:null,
      tages:[]
    }
  },created(){
    axios.get('http://localhost:8081/order/findAll/1/'+this.pageSize).then(
        (response) => {
          this.tableData = response.data.content;
          this.total = response.data.totalElements;
        }
    );
    axios.get('http://localhost:8081/orderstatus/findAll/').then(
        (response) => {
          this.statuses = response.data;

          for (const sta of this.statuses) {
            const tage = {text: sta.status, value: sta.id};
            this.tages.push(tage);
          }
        }
    );
    axios.get('http://localhost:8081/order/getProductname').then(
        (response) => {
          this.productnames = response.data;
        }
    );
    axios.get('http://localhost:8081/order/getReceviers').then(
        (response) => {
          this.receviers = response.data;
        }
    );
  },
  methods: {
    clearFilter() {
      this.$refs.filterTable.clearFilter();
    },
    formatter(row, column) {
      return row.description;
    },
    filterTag(value, row) {
      return row.statusid == value;
    },
    filterHandler(value, row, column) {
      const property = column['property'];
      return row[property] == value;
    },
    page(currentPage) {
      axios.get('http://localhost:8081/order/findAll/' + currentPage + '/' + this.pageSize).then(
          (response) => {
            this.tableData = response.data.content;
            this.total = response.data.totalElements;
          }
      )
    }
  }
}
</script>